<template>
	<view class="page">
		<view class="ca-main">
			<view class="ca-m-list" @click="goto(1)">
				<view class="ca-ml-left">
					<view>图文投票</view>
					<view>快速发起投票，高效推广统计</view>
				</view>
				<view class="ca-ml-right">
					<image mode="widthFix" src="/static/img/activity1.png"></image>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>

			<view class="ca-m-list" @click="goto(2)">
				<view class="ca-ml-left">
					<view>视频投票</view>
					<view>支持本地上传，不限选手，不限流量</view>
				</view>
				<view class="ca-ml-right">
					<image mode="widthFix" src="/static/img/activity3.png"></image>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			
			<view class="ca-m-list" @click="goto(3)">
				<view class="ca-ml-left">
					<view>文字投票</view>
					<view>纯文字投票</view>
				</view>
				<view class="ca-ml-right">
					<image mode="widthFix" src="/static/img/activity5.png"></image>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			
			<view class="ca-m-list" @click="goto(4)">
				<view class="ca-ml-left">
					<view>二选一投票</view>
					<view>设置两个选手PK</view>
				</view>
				<view class="ca-ml-right">
					<image mode="widthFix" src="/static/img/activity2.png"></image>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ad"><ad :unit-id="ad.create_video" ad-type="video" ad-theme="white" v-if="ad && ad.create_video"></ad></view>
			<!-- #endif -->
		</view>

		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl:'common/cdnurl',
				system:'common/system',
				ad:'common/ad',
			})
		},
		data() {
			return {
				
			};
		},
		async onLoad() {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			uni.$u.mpShare = {
				title: this.system.share_title,
				path: '/pages/index/index',
				imageUrl: this.imgUrl + this.system.share_img
			}
			// 插屏广告
			this.adUtils.cp.load('create_cp')
			// #endif
			this.utils.share()
		},
		methods: {
			goto(type) {
				if (type < 3){
					this.utils.goto('/pages/temp/temp?mold=' + type)
				}else if(type == 3){
					this.utils.goto('/pages/save/text')
				}else{
					this.utils.goto('/pages/save/pk')
				}
			}
		}
	};
</script>

<style lang="scss">
	.ca-main {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.ca-m-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		height: 170rpx;
		border-radius: 30rpx;
		background-color: #fff;
		position: relative;
		padding: 0 23rpx 0 43rpx;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.ca-ml-left {
		text-align: left;
	}

	.ca-ml-left view:first-of-type {
		font-weight: bold;
		font-size: 32rpx;
		color: #4e4e4e;
		display: inline-block;
	}

	.ca-ml-left view:last-of-type {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #7f7f7f;
	}

	.ca-ml-right {
		@include flex;
		justify-content: space-between;
		min-width: 70px;
	}

	.ca-ml-right image:first-of-type {
		vertical-align: middle;
		width: 51rpx;
		height: 51rpx;
		margin-right: 46rpx;
	}
	
</style>
